<template>
  <div class="chart-wrap">
    <div class="wu-chart" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { setAutoHoverIntervalFun } from '@/utils/echartUtils'
let wuChartRef = ref()
let wuChart: echarts.ECharts = {} as echarts.ECharts

type tooltipNeedType = {
  name: string
  value: string
  seriesName: string
  marker: string
}
// 造数据
const getArr = () => {
  const arr = new Array(12).fill(0)
  return {
    xData: arr.map((item, index) => index + 1),
    yData: arr.map(() => Math.floor(Math.random() * 600))
  }
}
const data1 = getArr()
const chartData = {
  colors: ['#FFA600', '#007AFE', '#FF4B7A'],
  gradientColors: [
    'rgba(254, 219, 101,0.1)',
    'rgba(0, 122, 254,0.1)',
    'rgba(255, 75, 122, 0.1)'
  ],
  xData: data1.xData,
  yData: [
    {
      label: `${new Date().getFullYear() - 2}年`,
      data: [
        '184',
        '90',
        '120',
        '0',
        '30',
        '100',
        '80',
        '40',
        '20',
        '510',
        '350',
        '180'
      ]
    },
    {
      label: `${new Date().getFullYear() - 1}年`,
      data: [
        '118',
        '509',
        '366',
        '162',
        '380',
        '123',
        '321',
        '158',
        '352',
        '474',
        '154',
        '22'
      ]
    },
    {
      label: `${new Date().getFullYear()}年`,
      data: [
        '548',
        '259',
        '113',
        '90',
        '69',
        '512',
        '23',
        '49',
        '28',
        '420',
        '313',
        '156'
      ]
    }
  ]
}
const getSeries = () => {
  const series = chartData.yData.map((item, index) => {
    return {
      name: item.label,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      // showSymbol: false,
      emphasis: {
        // showSymbol: true
      },
      itemStyle: {
        borderType: 'dotted',
        color: chartData.colors[index],
        opacity: 0.6
      },
      lineStyle: {
        color: chartData.colors[index],
        opacity: 0.6
      },
      areaStyle: {
        opacity: 0.6,
        shadowColor: 'rgba(25,163,223, 0.3)',
        shadowBlur: 20,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: chartData.colors[index] // 0% 处的颜色
            },
            {
              offset: 1,
              color: chartData.gradientColors[index] // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      data: item.data
    }
  }) as any

  return series
}

const options: echarts.EChartOption = {
  grid: {
    left: 50,
    right: 20,
    top: 45,
    bottom: 45
  },
  legend: {
    align: 'left',
    icon: 'rect',
    right: 0,
    top: 5,
    textStyle: {
      color: '#fff'
    },
    itemWidth: 18,
    itemHeight: 8
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      // axis: 'auto',
      snap: true
    },
    formatter: (paramArr) => {
      let curName = ''
      const list = (paramArr as tooltipNeedType[])
        .map((item) => {
          const { name, value, seriesName, marker } = item
          curName = name
          return `<li>${marker} ${seriesName} ${value}人</li>`
        })
        .join('')
      return `
      <div class="chart-tooltip bg2">
        <span>
          ${curName} 月
        </span>
        
        <ul class="chart-tooltip-list">
        ${list}
        </ul>
      </div>
      `
    },
    extraCssText: 'padding: 0;border: none;background-color:transparent;'
  },
  xAxis: {
    type: 'category',
    data: chartData.xData,
    splitLine: {
      show: false
    },
    axisLine: {
      show: false,
      symbol: ['none', 'arrow']
    },
    axisLabel: {
      color: '#74b6ee'
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    name: '(人数)',
    nameTextStyle: {
      color: '#7ec7ff',
      fontSize: 12,
      padding: [0, 30, -4, 0]
    },
    type: 'value',
    minInterval: 1,
    axisLabel: {
      color: '#74b6ee'
    },
    splitLine: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#816939' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#17184d' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    },
    axisTick: {
      show: false
    }
  },
  series: getSeries()
}
// 停止播放函数
let stopFun: Function
onMounted(() => {
  wuChart = echarts.init(wuChartRef.value)
  wuChart.setOption(options)
  const { init, stop } = setAutoHoverIntervalFun(wuChart, chartData.xData)
  init()
  stopFun = stop
})
onUnmounted(() => {
  stopFun()
})
</script>

<style lang="scss" scoped>
.wu-chart {
  height: 100%;
}
</style>
